<template>
  <view>
    <u-sticky :enable="enable">
      <view class="top">
        <view class="flex justify-around height align-end">
          <view
            @click="changeTab"
            data-chooseStatus="1"
            :style="chooseStatus == 1 ? '' : 'color:#e3e3e3'"
            >调拨的机具
          </view>
          <view
            @click="changeTab"
            data-chooseStatus="2"
            :style="chooseStatus == 1 ? 'color:#e3e3e3' : ''"
            >收到的机具
          </view>
        </view>
        <view
          class="choose"
          :style="chooseStatus == 1 ? 'left:140rpx' : 'left:516rpx'"
        ></view>
      </view>
    </u-sticky>

    <!-- 调拨机具部分 -->
    <view class="allocation" v-if="chooseStatus == 1">
      <view class="allocationList">
        <view class="cu-bar">
          <view class="action sub-title top">
            <text class="text-xl text-bold text-orange">调拨记录</text>
            <text class="bg-orange"></text>
          </view>
        </view>

        <view
          class="itemList"
          v-for="item in orderList"
          v-if="orderList.length > 0"
          @click="recordDetail(chooseStatus, item)"
        >
          <view
            class="time"
            :style="{ background: allocationStatus[item.status].color }"
            >{{ $u.timeFormat(item.create_time, "yyyy-mm-dd hh:MM:ss") }}
          </view>
          <view
            class="backStatus"
            :style="{ background: allocationStatus[item.status].color }"
          >
            {{ allocationStatus[item.status].label }}
          </view>
          <view class="info flex justify-between align-center">
            <text
              >{{ !item.order_name ? "未认证" : item.order_name
              }}<text
                style="
                  color: #fb4535;
                  padding-left: 10rpx;
                  padding-right: 10rpx;
                "
                >划拨</text
              >{{ item.real_name }}（{{ item.nums }}台）</text
            >
            <u-button
              type="default"
              :ripple="true"
              size="mini"
              :style="{ background: allocationStatus[item.status].color }"
              @click="recordDetail(chooseStatus, item)"
            >
              查看详情
            </u-button>
          </view>
        </view>

        <view
          class="noMachine flex align-center"
          v-if="!orderList.length && isLoad"
        >
          <image
            src="../../static/images/noData/zwsh.png"
            mode="widthFix"
          ></image>
          <text>暂无记录</text>
        </view>
      </view>
    </view>

    <!-- 收到机具部分 -->
    <view class="receive" v-if="chooseStatus == 2">
      <view class="allocationList">
        <view class="cu-bar">
          <view class="action sub-title top">
            <text class="text-xl text-bold text-orange">接收记录</text>
            <text class="bg-orange"></text>
          </view>
        </view>

        <view
          class="itemList"
          v-for="item in receiveList"
          v-if="receiveList.length > 0"
          @click="recordDetail(chooseStatus, item)"
        >
          <view
            class="time"
            :style="{ background: allocationStatus[item.status].color }"
            >{{ $u.timeFormat(item.create_time, "yyyy-mm-dd hh:MM:ss") }}
          </view>
          <view
            class="backStatus"
            :style="{ background: allocationStatus[item.status].color }"
          >
            {{ allocationStatus[item.status].label }}
          </view>
          <view class="info flex justify-between align-center">
            <text
              >{{ !item.order_name ? "未认证" : item.order_name
              }}<text
                style="
                  color: #fb4535;
                  padding-left: 10rpx;
                  padding-right: 10rpx;
                "
                >划拨</text
              >{{ item.real_name }}（{{ item.nums }}台）</text
            >
            <u-button
              type="default"
              :ripple="true"
              size="mini"
              :style="{ background: allocationStatus[item.status].color }"
              @click="recordDetail(chooseStatus, item)"
            >
              查看详情
            </u-button>
          </view>
        </view>

        <view
          class="noMachine flex align-center"
          v-if="!receiveList.length && isLoad"
        >
          <image
            src="../../static/images/noData/zwjl.png"
            mode="widthFix"
          ></image>
          <text>暂无记录</text>
        </view>
      </view>
    </view>
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      chooseStatus: "1",
      allocationStatus: [
        {
          label: "待确认",
          color: "#fe913d",
        },
        {
          label: "已完成",
          color: "#39b550",
        },
        {
          label: "已驳回",
          color: "#cccccc",
        },
      ],

      page: 1,
      orderList: [],
      receiveList: [],
      enable: true,
      isLoad: false,
    };
  },
  onLoad() {
    this.getRecordList();
  },
  onShow() {
    this.enable = true;
  },
  onHide() {
    this.enable = false;
  },
  methods: {
    changeTab(e) {
      this.isLoad = false;
      this.chooseStatus = e.currentTarget.dataset.chooseStatus;
      this.getRecordList();
    },

    // 机具调拨记录
    getRecordList() {
      this.isLoad = false;
      this.$loading();
      let code = uni.getStorageSync("loginInfo").third_session;
      this.$u.api
        .recordList({
          third_session: code,
          orderType: this.chooseStatus == 1 ? 1 : 2,
          cur_page: this.page,
          pageNumber: 10,
        })
        .then((res) => {
          if (res.status == 200) {
            var datas = res.result;
            if (this.chooseStatus == 1) {
              this.orderList = datas;
            } else {
              this.receiveList = datas;
            }
          }
          this.$loading(false);
          this.isLoad = true;
        });
    },

    //格式化时间
    formatTime(time) {
      return this.$tools.timeStamp(time);
    },

    // 跳转调拨机具详情
    recordDetail(chooseStatus, item) {
      item.chooseStatus = chooseStatus;
      this.$u.route({
        url: "/pages/allocation/allocationDetail",
        params: item,
        // JSON.stringify把对象转为JOSN字符串
      });
    },
  },
};
</script>

<style lang="scss">
.top {
  position: relative;
}

.height {
  height: 100rpx;
  background-image: linear-gradient(to top, #fc6306 0%, #fb4535 100%);
  color: #fff;
}

.height view {
  padding-bottom: 16rpx;
  font-size: 30rpx;
  font-weight: 700;
  letter-spacing: 3rpx;
  transition: 0.4s;
}

.choose {
  position: absolute;
  bottom: 0;
  left: 140rpx;
  width: 100rpx;
  height: 6rpx;
  background-color: white;
  border-top-left-radius: 14rpx;
  border-top-right-radius: 14rpx;
  box-shadow: 0 -5rpx 16rpx #fff;
  transition: 0.4s;
}

.allocation,
.receive {
  .allocationList {
    margin-top: 10rpx;
    padding-bottom: 30rpx;
  }

  .itemList {
    position: relative;
    width: 88%;
    margin: 0 auto 40rpx;
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 5rpx 8rpx 14rpx #ccc;
    font-family: Din;
    overflow: hidden;

    .info {
      padding: 50rpx 0 0 30rpx;

      & > text {
        display: inline-block;
        width: 500rpx;
      }

      & > button {
        margin-right: 10rpx;
        background-color: #fb4535;
        color: #fff;
      }
    }
  }

  .time {
    position: absolute;
    left: 50rpx;
    top: 0;
    height: 40rpx;
    background-color: #fb4535;
    padding: 1rpx 10rpx;
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    color: #fff;
    overflow: scroll;
  }

  .backStatus {
    background-color: #fb4535;
    padding: 4rpx 10rpx;
    width: 200rpx;
    text-align: center;
    position: absolute;
    right: -50rpx;
    top: 18rpx;
    transform: rotate(36deg);
    color: #fff;
    font-size: 26rpx;
  }
}

</style>
